<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人信息修改</title>
    <style type="text/css">
body {
    min-height     : 100vh;
    width          : 100%;
    display        : flex;
    justify-content: center;
    align-items    : center;
    background     : linear-gradient(20deg, #c3e7fc, #013c8a);
}
#yonghu{
    background-color: #00000064;
    text-align:center;
    margin: 0px auto;
    margin-top: 150px;
    color: aliceblue;
    }
#fanhui{
    margin:3px 10px;
    border:none;
    outline:none;
    width:10rem;
    height:4rem;
    border-radius:5rem;
    background-color:#163D5D;
    color:#000000;
    font-weight:bold;
    font-size:1.5rem;
}
#fanhui a:hover{
    color: #000000;
}
.action {
    outline: none;
    cursor: pointer;
    color: #fff;
    background-color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    width: 80%;
    margin-top: 25px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.2);
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    letter-spacing: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.action.message {
    background-color: #fff;
}

.action:hover {
    transform: scale(1.05);
    opacity: 0.85;
}
.action.message:hover {
    transform: scale(1.05);
    opacity: 0.85;
}


    </style>
</head>
    <body>
        <div id="yonghu">
        <div align="center"><h1>用户信息修改</h1></div>
        <form name="UserInfo" method="Post" action="UserLogin.jsp">
            <table align="center" width="500">
                <tr>
                    <td width="200" height="26" class="wuwei">&nbsp;&nbsp;用户名：</td>
                    <td width="300" height="26"><input typr="text" name="username" size="40"></td>
                </tr>
                <tr>
                    <td width="200" height="26" class="mima">&nbsp;&nbsp;新密码：</td>
                    <td width="300" height="26"><input type="password" name="userkey1" size="40" maxlength="35"></td>
                <tr>
                    <td width="200" height="26" class="queren">&nbsp;&nbsp;确认密码:</td>
                    <td width="300" height="26"><input type="password" name="userkey2" size="40" maxlength="35"></td>
                </tr>
                <tr>
                    <td width="200" height="26">&nbsp;&nbsp;性&nbsp;&nbsp;别:</td>
                    <td width="300" height="26"><input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女" checked>女</td>
                </tr>
                <tr>
                    <td width="200" height="26">&nbsp;&nbsp;生&nbsp;&nbsp;日:</td>
                    <td width="300" height="26"><input name="userkey1" size="40" maxlength="35"></td>
                </tr>
                <tr>
                    <td width="200" height="26">&nbsp;&nbsp;教育水平：</td>
                    <td width="300" height="26">
                        <select name="edu">
                            <option value="博士研究生学历">博士研究生学历</option>
                            <option value="硕士学历">硕士研究生学历</option>
                            <option value="本科">本科学历</option>
                            <option value="大专及以下">大专及以下</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan=2 width=400 align=left valign="top">
                        <fieldset>
                            <legend>爱好</legend>
                            <p>&nbsp;&nbsp;请选择你的爱好：</p>
                            <p><label><input type="checkbox" name="favor1" value="favor1" >读书</label>
                                &nbsp;&nbsp;
                                <label><input type="checkbox" name="favor2" value="favor2" >旅游</label>
                                &nbsp;&nbsp;
                                <label><input type="checkbox" name="favor3" value="favor3" >音乐</label>
                                &nbsp;&nbsp;
                                <label><input type="checkbox" name="favor4" value="favor4" >运动</label>
                                &nbsp;&nbsp;
                                <label><input type="checkbox" name="favor4" value="favor4" >游戏</label>
                                &nbsp;&nbsp;
                                <label><input type="checkbox" name="favor4" value="favor4" >睡觉</label>
                            </p>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td width="200">&nbsp;&nbsp;自我评价:</td>
                    <td width="300"><u><textarea name="word" rows="5" cols="40"></textarea></u></td>
                </tr>
                <tr>
                    <td colspan=2 width=400 align=center valign=top>请上传你的头像图片：<input type="file" name="headpic"></td>
                </tr>
                <tr>
                    <td width="100" height="26">&nbsp;&nbsp;电子邮箱：</td>
                    <td width="400" height="26"><u><input type="text" name="email" size="30" maxlength="50"> </u></td>
                </tr>
            </table>
        </form>
        <div>
            <button class="action"><a href="https://xu-zhouyu.gitee.io/weather/weather/change.html">确定</a></button>
            <button class="action message"><a href="https://xu-zhouyu.gitee.io/weather/weather/index.html">取消</a></button>
    </div>
    </div>
    
    <button onclick="ww()" type="submit"></button>
    <div id="msge" style="display: none; color: black;"></div>
    <script>
        function ww(){
            var wuwei=localStorage.getItem("username");
            var uvalue=u.value;
            var mima=localStorage.getItem("password");
            var pvalue=p.value;
            var queren=localStorage.getItem("pass");
            var passvalue=pass.value;
            if(uvalue=="")
            {
                msge.style.display="block";
                msge.innerText="名字不得为空";
                return;
            }
            if(pvalue!=passvalue)
            {
                msge.style.display="block";
                msge.innerText="与密码不一致";
                return;
            }
            localStorage.setItem("username",uvalue);
            localStorage.setItem("password",pvalue);
            localStorage.setItem("pass",passvalue);
            arr.push({
                unan:u.value,
                pvalue:p.value,
                passvalue:pass.value
            });
            localStorage.setItem('arr',JSON.stringify(arr));
            form.reset();
            render();
        }
     
    </script>
    </body>
</html>

